<template>
	<view class="bg">
		<view class="head">
			<image class="head_left" src="../../../static/wode/return.png" mode="" @tap="back()"></image>
			<view class="head_mid">
				忘记密码
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="body-bottom">
			<view class="body_item">
				<image class="left_img" src="../../../static/index/ren.png" mode=""></image>
				<input type="text" value="" placeholder="手机号/邮箱" maxlength="30" v-model="loginName" />
			</view>
			<view class="body_item">
				<image class="left_img" src="../../../static/index/xinxi.png" mode=""></image>
				<input type="number" value="" placeholder="验证码" maxlength="30" v-model="code" @input="changeBtn" />
				<view class="borderBox">
				</view>
				<text class="getyanzhengma" @tap="getCode" v-if="showGetCode">获取验证码</text>
				<text class="getyanzhengma" v-else>{{time}}秒</text>
			</view>
		</view>
		<view class="btn " @tap="tonext" v-if="haveCode==true">
			下一步
		</view>
		<view class="btn btn1" v-else>
			下一步
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: 59,
				loginName: '',
				code: '',
				showGetCode: true,
				haveCode: false,
				isEmail:false,
				isPhone:false,
			};
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getCode() { //获取验证码
				if (this.loginName == '') {
					uni.showToast({
						title: '请输入手机号或邮箱',
						icon: 'none'
					})
				} else {
					if (this.loginName.indexOf('@') != -1) {
						this.isEmail=true
						this.sendEmailCode();
					} else {
						this.isPhone=true
						this.sendTelCode();
						
					}
				}
			},
			sendTelCode() { //发送手机验证码
				var data = {
					mobile: this.loginName,
					type:'forgetpwd'
				};
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'sms',
					actionName: 'send',
					data: data,
					successBack: function(res) {
						console.log(res);
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == 0) { //返回成功
							me.showGetCode = false;
							me.computeTime();
						}
					},
				})
			},
			sendEmailCode() { //发送邮箱验证码
				var data = {
					mail: this.loginName,
					type:'forgetpwd'
				};
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'mail',
					actionName: 'send',
					data: data,
					successBack: function(res) {
						console.log(res);
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == 0) {
							me.showGetCode = false;
							me.computeTime();
						}
					},
				})
			},
			computeTime() {
				var me = this;
				setInterval(function() {
					if (me.time > 0) {
						me.time--;
					} else {
						me.showGetCode = true;
						me.time = 59;
					}
				}, 1000)
			},
			changeBtn() {
				if (this.loginName != '' && this.code != '') {
					this.haveCode = true
				}
			},
			tonext() {
				var me = this;
				if (this.isPhone==true) {
					var data = {
						code: me.code,
						mobile: me.loginName
					}
					this.myAjaxNew({
						model: 'user',
						controllerName: 'sms',
						actionName: 'validate',
						data: data,
						successBack: function(res) {
							console.log(res)
							if (res.data.message == '成功') {
								uni.navigateTo({
									url: '/pages/My/setPass/setPass?setPass=true&&loginName='+me.loginName
								})
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'none'
								})
							}
						},
					})
				} else if(this.isEmail==true) {
					var data = {
						code: me.code,
						mobile: me.loginName
					}
					this.myAjaxNew({
						model: 'user',
						controllerName: 'mail',
						actionName: 'validate',
						data: data,
						successBack: function(res) {
							if (res.data.message == '成功') {
								uni.navigateTo({
									url: '/pages/My/setPass/setPass?setPass=true&&loginName='+me.loginName
								})
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'none'
								})
							}
						},
					})
				}
			},
		}
	}
</script>

<style scoped>
	.bg {
		background: #FFFFFF;
		height: 100%;
	}

	.head {
		width: 162upx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		width: 100%;
		padding: 0 24upx;
	}

	.head_right {
		width: 45upx;
	}

	.head image {
		width: 21upx;
		height: 36upx;
	}

	.body_item {
		border-bottom: 1upx solid #E6E6E6;
		display: flex;
		align-items: center;
		padding: 20upx 24upx;
		margin-top: 17upx;
		font-size: 28upx;
		color: #333333;
	}

	.body_item input {
		width: 100%;
	}

	.left_img {
		width: 46upx;
		height: 40upx;
		margin-right: 20upx;
	}

	.getyanzhengma {
		width: 120px;
		display: flex;
		flex-direction: row-reverse;
	}

	.borderBox {
		height: 33upx;
		border-left: 1upx solid #E6E6E6;
	}

	.btn {
		margin-top: 80upx;
	}

	.btn1 {
		width: 702upx;
		height: 88upx;
		background: rgba(70, 206, 207, .5);
		border-radius: 10upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88upx;
		margin: 0 auto;
		font-size: 32upx;
		margin-top: 80upx;
	}
</style>
